<template>
	<view :data-theme="theme">
		<view class='cash-withdrawal'>
			<view class='nav acea-row'>
				<view v-for="(item,index) in navList" :key="index" class='item font-color' @click="swichNav(index,item)">
					<view class='line bg_color' :class='currentTab==index ? "on":""'></view>
					<view class='iconfont' :class='item.icon+" "+(currentTab==index ? "on":"")'></view>
					<view class="tab_text">{{item.name}}</view>
				</view>
			</view>
			<view class='wrapper'>
				<!-- <view :hidden='currentTab != 0'>
					<image mode="widthFix"
						src="https://img.yiqichuang6688.top/crmebimage/public/product/2025/08/11/5fa9076e0c41417d8e53f5150b933ddf6e5rzrgu75.png"
						style="width: 100%;"></image>
				</view> -->
				<view :hidden='currentTab != 0' class='list'>
					<!-- <view class='tip'>
						当前可提现金额: <text
							class="price">￥{{settlementConfig.brokerage?settlementConfig.brokerage:0}},</text>冻结佣金：￥{{settlementConfig.freezeBrokerage?settlementConfig.freezeBrokerage:0}}
					</view> -->
					<form @submit="subCash" report-submit='true'>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>姓 名</view>
							<view class='input'>
								<input placeholder='请输入结算人姓名' v-model="invoicerecord.cardholder" placeholder-class='placeholder' name="cardholder" maxlength="20"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>身份证号</view>
							<view class='input'>
								<input placeholder='请输入结算人身份证号' v-model="invoicerecord.idCard" placeholder-class='placeholder' name="idCard" maxlength="20"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>手机号码</view>
							<view class='input'>
								<input type='number' placeholder='请填写结算人手机号' v-model="invoicerecord.mobile" placeholder-class='placeholder' name="mobile" maxlength="11"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>结算银行</view>
							<view class='input'>
								<picker @change="bindPickerChange" :value="index" :range="bankList">
									<text class='Bank'>{{bankList[index]}}</text>
									<text class='iconfont icon-qiepian38'></text>
								</picker>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>开户行</view>
							<view class='input'>
								<input placeholder='请填写结算的开户行地址' v-model="invoicerecord.bankAddress" placeholder-class='placeholder' name="bankAddress"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>银行卡号</view>
							<view class='input'>
								<input type='number' placeholder='请填写结算人卡号' v-model="invoicerecord.bankCardNo" placeholder-class='placeholder' name="bankCardNo" maxlength="19"></input>
							</view>
						</view>


						<button formType="submit" class='bnt bg-color'>提交</button>
					</form>
				</view>
				<view :hidden='currentTab != 1' class='list'>

          <form @submit="subCash" report-submit='true'>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>经营者</view>
              <view class='input'>
                <input placeholder='请填写经营者姓名' v-model="invoicerecord.realName" placeholder-class='placeholder' name="realName" maxlength="20"></input>
              </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>商户名称</view>
              <view class='input'>
                <input placeholder='请填写您的商户名称' v-model="invoicerecord.alipayAccount" placeholder-class='placeholder' name="alipayAccount" maxlength="20"></input>
              </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>统一社会信用代码</view>
              <view class='input'>
                <input placeholder='请填写您的统一社会信用代码' v-model="invoicerecord.wechatNo" placeholder-class='placeholder' name="wechatNo" maxlength="20"></input>
              </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>经营场所</view>
              <view class='input'>
                <input placeholder='请填写您的经营场所' v-model="invoicerecord.businessAddress" placeholder-class='placeholder' name="businessAddress" maxlength="20"></input>
              </view>
            </view>
            <view class='item acea-row row-top row-between'>
              <view class='name'>营业执照</view>
              <view class="input acea-row">
                <view class="picEwm" v-if="qrcodeUrlZ">
                  <image :src="qrcodeUrlZ"></image>
                  <text class='iconfont icon-guanbi1 font-color' @click='DelPicZ'></text>
                </view>
                <view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic("Z")' v-else>
                  <text class='iconfont icon-icon25201'></text>
                  <view>上传图片</view>
                </view>
              </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>手机号码</view>
              <view class='input'>
                <input type='number' placeholder='请填写结算人手机号' v-model="invoicerecord.mobile" placeholder-class='placeholder' name="mobile" maxlength="11"></input>
              </view>
            </view>

            <view class='item acea-row row-between-wrapper'>
							<view class='name'>持卡人姓名</view>
							<view class='input'>
								<input placeholder='请输入持卡人姓名' v-model="invoicerecord.cardholder" placeholder-class='placeholder' name="cardholder" maxlength="20"></input>
							</view>
						</view>

            <view class='item acea-row row-between-wrapper'>
              <view class='name'>开户银行</view>
              <view class='input'>
                <picker @change="bindPickerChange" :value="index" :range="bankList">
                  <text class='Bank'>{{bankList[index]}}</text>
                  <text class='iconfont icon-qiepian38'></text>
                </picker>
              </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>开户行</view>
              <view class='input'>
                <input placeholder='请填写结算的开户行地址' v-model="invoicerecord.bankAddress" placeholder-class='placeholder' name="bankAddress"></input>
              </view>
            </view>
            <view class='item acea-row row-between-wrapper'>
              <view class='name'>银行卡号</view>
              <view class='input'>
                <input type='number' placeholder='请填写结算人卡号' v-model="invoicerecord.bankCardNo" placeholder-class='placeholder' name="bankCardNo"
                  maxlength="19"></input>
              </view>
            </view>

            <view>
              <button formType="submit" class='bnt bg-color'>提交</button>
            </view>
          </form>

				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		addInvoicerecord,
		editInvoicerecord,
		getInvoicerecordDetail,
	} from '@/api/invoicerecord.js';
  import {closingConfigApi} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		Debounce
	} from '@/utils/validate.js'
	let app = getApp();
	export default {
		data() {
			return {
				navList: [
          {
						'name': '自然人开票',
						'icon': '',
						'type': 'bank'
					},
					{
						'name': '个体工商户开票',
						'icon': '',
						'type': 'bank'
					},
				],
				type: 'bank',
				currentTab: 0,
				index: 0,
				bankList: [], //提现银行
				userInfo: [],
				isClone: false,
				settlementConfig: {}, //结算配置
				qrcodeUrlW: "",
				qrcodeUrlZ: "",
				isCommitted: false, //防止多次提交
				theme: app.globalData.theme,
        invoicerecord:{}
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getClosingConfig();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			if (this.isLogin) {
        if(options.businessAddress){
          this.currentTab = 1;
        }
        if(options && options.id){
          this.getInvoicerecordDetail(options.id)
        }
				this.getClosingConfig();
			} else {
				toLogin();
			}
		},
    onShow(options){
      if(options && options.id){
        this.getInvoicerecordDetail(options.id)
      }
    },
		methods: {
      getInvoicerecordDetail(id){
        getInvoicerecordDetail(id).then(res => {
          if(res.data.businessAddress){
            this.$set(this.invoicerecord, 'businessAddress', res.data.businessAddress );
            this.$set(this.invoicerecord, 'wechatNo', res.data.wechatNo );
            this.$set(this.invoicerecord, 'alipayAccount', res.data.alipayAccount );
            this.$set(this.invoicerecord, 'realName', res.data.realName );
            this.$set(this.invoicerecord, 'mobile', res.data.mobile );
            this.$set(this.invoicerecord, 'bankCardNo', res.data.bankCardNo );
            this.$set(this.invoicerecord, 'bankAddress', res.data.bankAddress );
            this.$set(this.invoicerecord, 'bankName', res.data.bankName );
            this.$set(this.invoicerecord, 'id', res.data.id );
            this.$set(this.invoicerecord, 'cardholder', res.data.cardholder );
            this.qrcodeUrlZ = res.data.paymentCode;

          }else{
            this.$set(this.invoicerecord, 'cardholder', res.data.cardholder );
            this.$set(this.invoicerecord, 'idCard', res.data.idCard );
            this.$set(this.invoicerecord, 'mobile', res.data.mobile );
            this.$set(this.invoicerecord, 'bankCardNo', res.data.bankCardNo );
            this.$set(this.invoicerecord, 'bankAddress', res.data.bankAddress );
            this.$set(this.invoicerecord, 'bankName', res.data.bankName );
            this.$set(this.invoicerecord, 'id', res.data.id );
          }
          
        })
      },
			uploadpic: function(type) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 1
				}, function(res) {
					if (type === 'W') {
						that.qrcodeUrlW = res;
					} else {
						that.qrcodeUrlZ = res;
					}
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPicW: function() {
				this.qrcodeUrlW = "";
			},
			DelPicZ: function() {
				this.qrcodeUrlZ = "";
			},
			/**
			 * 获取用户结算配置
			 *
			 */
			getClosingConfig() {
				closingConfigApi().then(res => {
					let data = res.data;
					this.$set(this, 'bankList', data.bankList);
					this.settlementConfig = res.data;
				})
			},
			swichNav: function(i, item) {
				this.currentTab = i;
				this.type = item.type;
        this.invoicerecord = {};
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			moneyInput(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.money = e.target.value
				})

			},
			subCash: Debounce(function(e) {
				let that = this,
					value = e.detail.value;
				switch (that.currentTab) {
					case 0:
						if (value.cardholder.length == 0) return this.$util.Tips({
							title: '请填写持卡人姓名'
						});
						if (value.idCard.length == 0) return this.$util.Tips({
							title: '请填写结算人身份证号'
						});
						if (value.mobile.length == 0) return this.$util.Tips({
							title: '请填写结算人手机号'
						});
						if (value.bankCardNo.length == 0) return this.$util.Tips({
							title: '请填写卡号'
						});
						if (value.bankAddress.length == 0) return this.$util.Tips({
							title: '请填写开户行地址'
						});
						value.bankName = that.bankList[that.index];
						break;
					case 1:
          if (value.cardholder.length == 0) return this.$util.Tips({
							title: '请填写持卡人姓名'
						});
						if (value.realName.length == 0) return this.$util.Tips({
							title: '请填写经营者姓名'
						});
						if (value.alipayAccount.length == 0) return this.$util.Tips({
							title: '请填写商户名称'
						});
						if (value.wechatNo.length == 0) return this.$util.Tips({
							title: '请填写统一社会信用代码'
						});
						if (value.businessAddress.length == 0) return this.$util.Tips({
							title: '请填写经营场所'
						});
						if (value.mobile.length == 0) return this.$util.Tips({
							title: '请填写结算人手机号'
						});
						if (value.bankCardNo.length == 0) return this.$util.Tips({
							title: '请填写银行卡号'
						});
						if (value.bankAddress.length == 0) return this.$util.Tips({
							title: '请填写开户行地址'
						});
						value.paymentCode = that.qrcodeUrlZ;
            // value.qrcodeUrlZ = that.qrcodeUrlZ;
            value.bankName = that.bankList[that.index];
						break;
				}
				value.closing_type = this.type;
				if (this.isCommitted == false) {
					this.isCommitted = true;
          if(this.invoicerecord.id){
            editInvoicerecord({
              ...value,
              id:this.invoicerecord.id,
            }).then(res => {
              this.$util.Tips({
                title: "开票信息修改成功",
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }).catch(err => {
              this.isCommitted = false;
              return this.$util.Tips({
                title: err
              });
            });
          }else{
            addInvoicerecord({
            ...value,
            }).then(res => {
              this.$util.Tips({
                title: "开票信息添加成功",
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }).catch(err => {
              this.isCommitted = false;
              return this.$util.Tips({
                title: err
              });
            });
          }
          this.isCommitted = false;
				}
			})
		}
	}
</script>

<style>
	body {
		height: 100% !important;
	}
</style>
<style lang="scss">
	page {
		background-color: #fff !important;

	}

	.cash-withdrawal .nav {
		height: 130rpx;
		box-shadow: 0 10rpx 10rpx #f8f8f8;
	}

	.cash-withdrawal .nav .item {
		font-size: 26rpx;
		flex: 1;
		text-align: center;
	}

	.cash-withdrawal .nav .item~.item {
		border-left: 1px solid #f0f0f0;
	}

	.cash-withdrawal .nav .item .iconfont {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		@include coupons_border_color(theme);
		@include main_color(theme);
		text-align: center;
		line-height: 37rpx;
		margin: 0 auto 6rpx auto;
		font-size: 22rpx;
		box-sizing: border-box;
	}

	.cash-withdrawal .nav .item .iconfont.on {
		@include main_bg_color(theme);
		color: #fff !important;
		@include coupons_border_color(theme);
		// border-color: $theme-color;
	}

	.cash-withdrawal .nav .item .line {
		width: 2rpx;
		height: 20rpx;
		margin: 0 auto;
		transition: height 0.3s;
	}

	.tab_text {
		@include main_color(theme);
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.cash-withdrawal .nav .item .line.on {
		height: 39rpx;
	}

	.cash-withdrawal .wrapper .list {
		padding: 0 30rpx;
	}

	.cash-withdrawal .wrapper .list .item {
		border-bottom: 1rpx solid #eee;
		min-height: 28rpx;
		font-size: 30rpx;
		color: #333;
		padding: 39rpx 0;
	}

	.cash-withdrawal .wrapper .list .item .name {
		width: 130rpx;
	}

	.cash-withdrawal .wrapper .list .item .input {
		width: 505rpx;
	}

	.cash-withdrawal .wrapper .list .item .input .placeholder {
		color: #bbb;
	}

	.cash-withdrawal .wrapper .list .item .picEwm,
	.cash-withdrawal .wrapper .list .item .pictrue {
		width: 140rpx;
		height: 140rpx;
		border-radius: 3rpx;
		position: relative;
		margin-right: 23rpx;
	}

	.cash-withdrawal .wrapper .list .item .picEwm image {
		width: 100%;
		height: 100%;
		border-radius: 3rpx;
	}

	.cash-withdrawal .wrapper .list .item .picEwm .icon-guanbi1 {
		position: absolute;
		right: -14rpx;
		top: -16rpx;
		font-size: 40rpx;
	}

	.cash-withdrawal .wrapper .list .item .pictrue {
		border: 1px solid rgba(221, 221, 221, 1);
		font-size: 22rpx;
		color: #BBBBBB;
	}

	.cash-withdrawal .wrapper .list .item .pictrue .icon-icon25201 {
		font-size: 47rpx;
		color: #DDDDDD;
		margin-bottom: 3px;
	}

	.cash-withdrawal .wrapper .tip {
		font-size: 26rpx;
		color: #999;
		margin-top: 25rpx;
		padding: 0 30rpx;
	}

	.cash-withdrawal .wrapper .bnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		border-radius: 50rpx;
		line-height: 90rpx;
		margin: 64rpx auto;
	}

	.cash-withdrawal .wrapper .tip2 {
		font-size: 26rpx;
		color: #999;
		text-align: center;
		margin: 44rpx 0 20rpx 0;
	}

	.cash-withdrawal .wrapper .value {
		height: 135rpx;
		line-height: 135rpx;
		border-bottom: 1rpx solid #eee;
		width: 690rpx;
		margin: 0 auto;
	}

	.cash-withdrawal .wrapper .value input {
		font-size: 80rpx;
		color: #282828;
		height: 135rpx;
		text-align: center;
	}

	.cash-withdrawal .wrapper .list .value .placeholder2 {
		color: #bbb;
	}

	.price {
		@include price_color(theme);
	}
</style>